<template>
<div id="app" class="app">
  <transition :name="transitionName">
    <keep-alive :include="/^alive/">
      <router-view ></router-view>
    </keep-alive>
  </transition>
</div>
</template>
<script>
export default{
  data(){
    return{
			images:[],
      transitionName:'',

    };
  },
	mounted() {
	
		
	
	},
  watch: {
    $route(to, from) {
      this.$toast.clear();
      if(typeof(from.meta.index) == 'undefined') return;
      if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },	
}
</script>
<style>
html {height: 100%; touch-action: none;}
body{ margin: 0; padding: 0; user-select:none; overflow:hidden;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0px;padding:0px;}
input,button{-webkit-appearance:none;border-radius:0;}
input{outline:none; margin: 0; padding: 0; color: #3A3C3D; user-select: text;-webkit-user-select: text;}
input::-webkit-input-placeholder{ color: #aaa;}

.app {height: 100vh; width:7.5rem; font-size:0.32rem; overflow:hidden; font-family:Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {will-change: transform;transition: all 0.2s ease; position:fixed;}
.slide-right-enter {opacity: 0;transform: translate3d(-100%, 0, 0);}
.slide-right-leave-active {opacity: 0;transform: translate3d(100%, 0, 0);}
.slide-left-enter {opacity: 0;transform: translate3d(100%, 0, 0);}
.slide-left-leave-active {opacity: 0;transform: translate3d(-100%, 0, 0);}
img{max-width:100%;border:none;vertical-align:middle;}
img[lazy=loading]{opacity:0.6; background:#EAEEF1 url(assets/loading-img.png) no-repeat center center; background-size: 1rem 1rem; transition:opacity ease 0.3s;}
img[lazy=loaded]{opacity:1;  transition:opacity ease 0.3s;}
img[lazy=error]{opacity:1;  transition:opacity ease 0.3s;  background:#EAEEF1 url(assets/loading-img.png) no-repeat center center; background-size: 1rem 1rem;}

.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ellipsis-l2{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.w{ width: 6.9rem; margin: 0 auto;}
.hover:active{ opacity:0.8;}
.layout{width:7.5rem; height:100vh; display:flex; flex-direction:column;}
.layout-inner{height:calc(100vh - 1rem); width:7.5rem;  display:flex; overflow:hidden; flex-direction:column;}
.layout-main{width:7.5rem; height:calc(100vh - 1rem); display:flex; flex-direction:column;}
.layout-box{ flex:1; -webkit-overflow-scrolling:touch; overflow-y:auto; overflow-x: hidden;}


</style>
